<div class="engSpecial-container">
    <div>
        <h1><span>工程专题</span></h1>
        <span class="pre" ng-click="dirction('pre')"></span>
        <span class="next" ng-click="dirction('next')"></span>
        <div class="banner-view">
            <div class="banner-container">
                <div ng-repeat="item in specialDataList">
                    <img src="{{item.logo}}" alt="" ui-sref="special({subjectId:item.subjectId})"/>
                    <ul>
                        <li ng-repeat="items in item.filelist"><img ng-src="{{items.typeId | getIconSmall}}" alt=""><a ui-sref="eng.techdetail({fileId:items.fileId})" title="{{items.name}}" ng-bind="items.name"></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .engSpecial-container{
        background: url(them/img/jb-bg.png) repeat;
        padding-top:50px;
    }
    .engSpecial-container>div{
        width:1200px;
        margin:0 auto;
        position:relative;
    }
    .engSpecial-container .pre{
        left:-40px;
        background:url(them/imag/engSpecial-left-arrow.jpg) no-repeat;
    }
    .engSpecial-container .pre:hover{
        background:url(them/imag/engSpecial-left-arrow-hover.jpg) no-repeat;
    }
    .engSpecial-container .next{
        right:-40px;
        background:url(them/imag/engSpecial-right-arrow.jpg) no-repeat;
    }
    .engSpecial-container .next:hover{
        background:url(them/imag/engSpecial-right-arrow-hover.jpg) no-repeat;
    }
    .engSpecial-container>div>span{
        position: absolute;
        display: block;
        width:20px;
        height:49px;
        cursor: pointer;
        top:50%;
    }
    .engSpecial-container h1{
        width:200px;
        height:50px;
        padding-left:27px;
        background:url(them/imgs/PracticeBg.jpg) no-repeat;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .engSpecial-container h1 span:nth-child(1){
        font-size:24px;
        color:#30a3ff;
        margin-top:-15px;
    }
    .banner-view{
        width:1200px;
        height:408px;
        overflow: hidden;
        margin-top:12px;
    }
    .banner-container{
        overflow:hidden;
    }
    .banner-container>div{
        float:left;
        width:288px;
        height:404px;
        border:1px solid #dddddd;
        margin-right:13px;
        font-size:14px;
        color:#333333;
        background:white;
    }
    .banner-container>div:last-child{
        margin-right:0;
    }
    .banner-container>div>img{
        display:block;
        width:286px;
        height:160px;
        padding:1px;
        cursor: pointer;
    }
    .banner-container>div ul{
        height:244px;
        box-sizing: border-box;
        padding:0 20px;
    }
    .banner-container>div ul li{
        margin-top:18px;
        display: flex;
        align-items: center;
    }
    .banner-container>div ul li img{
        width:14px;
        height:16px;
        margin-right:20px;
    }
    .banner-container>div ul a{
        display: inline-block;
        width:214px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .banner-container>div ul a:hover{
        color:#30a3ff;
        text-decoration: underline;
    }
</style>